/**
 * Created by shaotingzhou on 2017/5/10.
 */
// 近日使用情况
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    ActivityIndicator,
    Platform,
    ScrollView
} from 'react-native';
import { StockLine } from 'react-native-pathjs-charts'
import Navigator from '../../Main/navigator' //导航栏
import Item from '../downloadInfo/downloadInfoItem'  //中间部分

var {width,height} = Dimensions.get('window');

export default class useInfo extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            stockLineDataAry : [],
            typeDic: {}
        };
    }

    render() {
        const ary = this.state.stockLineDataAry
        const dic = this.state.typeDic

        if(ary.length > 0) {
            let data = [
                [{
                    "x": 0,
                    "y": 2.2
                }, {
                    "x": 1,
                    "y": 2.6
                }, {
                    "x": 2,
                    "y": 2
                }, {
                    "x": 3,
                    "y": 2.7
                }, {
                    "x": 4,
                    "y": 1.9
                }, {
                    "x": 5,
                    "y": 4.7
                }]
            ]
            let options = {
                width: 300,
                height: 200,
                color: '#2980B9',
                margin: {
                    top: 10,
                    left: 35,
                    bottom: 30,
                    right: 10
                },
                animate: {
                    type: 'delayed',
                    duration: 200
                },
                axisX: {
                    showAxis: true,
                    showLines: true,
                    showLabels: true,
                    showTicks: true,
                    zeroAxis: false,
                    orient: 'bottom',
                    tickValues: [
                        {value: ary[0].type},
                        {value: ary[1].type},
                        {value: ary[2].type},
                        {value: ary[3].type},
                        {value: ary[4].type},
                        {value: ary[5].type},
                    ],
                    label: {
                        fontFamily: 'Arial',
                        fontSize: 8,
                        fontWeight: true,
                        fill: '#34495E'
                    }
                },
                axisY: {
                    showAxis: true,
                    showLines: true,
                    showLabels: true,
                    showTicks: true,
                    zeroAxis: false,
                    orient: 'left',
                    tickValues: [],
                    label: {
                        fontFamily: 'Arial',
                        fontSize: 8,
                        fontWeight: true,
                        fill: '#34495E'
                    }
                }
            }

            let description =  '共播放音乐' + ary[0].time + '小时'
            let description1 = '共播放音乐' + ary[1].time + '小时'
            let description2 = '共播放音乐' + ary[2].time + '小时'
            let description3 = '共播放音乐' + ary[3].time + '小时'
            let description4 = '共播放音乐' + ary[4].time + '小时'
            let description5 = '共播放音乐' + ary[5].time + '小时'

            let allTime = 0
            ary.forEach(function (val, index) {
                allTime += val.time
            })

            let tatalDescription = '上周一共播放音乐' + allTime + '个小时,' +
                '其中' + dic["最长"] + '播放时长最长,' +
                 dic["最短"] + '播放时长最短.'

            return (
                <View>
                    {/*导航栏*/}
                    <Navigator
                        centerText='使用情况'
                        leftSource={require('../../image/返回.png')}
                        leftAction={() => this.leftAction()}
                        rightAction={() => this.rightAction()}
                    />
                    <ScrollView style={{height: height, backgroundColor: '#DEDEDE'}}>
                        {/*折线图*/}
                        <View style={{backgroundColor: 'white', marginBottom: 1}}>
                            <StockLine data={data} options={options} xKey='x' yKey='y'/>
                        </View>
                        {/*中间部分*/}
                        <Item leftTxt={ary[0].type} rightTxt={description} champion={ary[0].champion}/>
                        <Item leftTxt={ary[1].type} rightTxt={description1} champion={ary[1].champion}/>
                        <Item leftTxt={ary[2].type} rightTxt={description2} champion={ary[2].champion}/>
                        <Item leftTxt={ary[3].type} rightTxt={description3} champion={ary[3].champion}/>
                        <Item leftTxt={ary[4].type} rightTxt={description4} champion={ary[4].champion}/>
                        <Item leftTxt={ary[5].type} rightTxt={description5} champion={ary[5].champion}/>
                        {/*底部*/}
                        <View style={{backgroundColor: 'white', marginBottom: 1, height: 180}}>
                            <Text style={{marginTop: 10, marginLeft: 5, fontWeight: 'bold'}}>上周情况:</Text>
                            <Text style={{marginTop: 5, marginLeft: 5,}}>{tatalDescription}</Text>
                        </View>
                    </ScrollView>
                </View>
            )
        }else{
            return(
                <ActivityIndicator
                    animating={true}
                    style={{flex: 1,alignItems: 'center',justifyContent: 'center'}}
                    size="large" />
            )
        }
    }

    componentDidMount() {
        console.disableYellowBox = true;  //关闭警告提示
        let url = 'http://rapapi.org/mockjsdata/18730/stockline'
        fetch(url)
            .then((response) => response.json())
            .then((json) => {
                this.setState({
                    stockLineDataAry:json.stockLine,
                    typeDic:json.type
                })

            })
    }

    leftAction =()=>{
        this.props.navigator.pop({})
    }

    rightAction =()=>{

    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});